<template>
    <!-- 历史病例 -->
    <div class="historicalCaseContent" :style="{'height':(height==null?divAutoHeight:height)+'px','width':(width==null?divAutoWidth:width)+'px', 'overflow-y':'auto'}">
        <h3 class="dialog-plate-title"><span>结果上传</span></h3>
        <el-button type="primary" @click="insertHOtherCheck('5')">新增</el-button>
        <el-table :data="tableChestData" stripe border class="company-table">
            <el-table-column fixed type="index" label="*" sortable align="center" min-width="40"></el-table-column>
            <el-table-column prop="checkDate" label="就诊日期" sortable min-width="200">
              <template slot-scope="scope">
                 {{timestampToTime(scope.row.checkDate==null?new Date():scope.row.checkDate,'yyyy-mm-dd')}}
              </template>
            </el-table-column>
            <el-table-column prop="checkRemark" label="诊断结果" sortable min-width="200"></el-table-column>
            <el-table-column prop="checkUnit" label="诊断地点" sortable min-width="200"></el-table-column>
            <el-table-column fixed="right" label="操作" align="center" min-width="75">
                <template slot-scope="scope">
                    <el-button  @click="insertUpdateCheck('history',scope.row)" type="text" size="small">详情</el-button>
                </template>                 
            </el-table-column>
        </el-table> 
        <el-dialog :title="dialogForUp.title" :visible.sync="dialogForUp.isShow" width="100%" :height="divAutoHeight+'px'" top="60px" center  append-to-body :close-on-clcick-modal="false" class="dialog-form">
            <div :style="{'height':(tableHeight-90)+'px','overflow-y':'auto'}">
                <el-form :inline="true" ref='checkForm' :model="dialogForUp" label-width="100px" class="demo-ruleForm" :rules="chestRules">
                <span v-if="dialogForUp.type==='history'">
                <el-form-item label="检查单位" prop="checkUnit" ><el-input v-model="dialogForUp.checkUnit"></el-input></el-form-item>
                <el-form-item label="诊断结果" prop="checkRemark" ><el-input v-model="dialogForUp.checkRemark"></el-input></el-form-item>
                <el-form-item label="就诊日期" prop="checkDate" ><el-date-picker type="date" v-model="dialogForUp.checkDate" placeholder="选择日期"></el-date-picker></el-form-item>
                <el-form-item label="病例记录人"><el-input v-model="dialogForUp.uploadUserName"></el-input></el-form-item>
                </span>  
                <span v-if="dialogForUp.type==='blood'">
                <el-form-item label="白细胞计数" prop="wbc" ><el-input v-model="dialogForUp.wbc"></el-input></el-form-item>
                <el-form-item label="血小板" prop="platelet" ><el-input v-model="dialogForUp.platelet"></el-input></el-form-item>
                <el-form-item label="HCT" prop="hct" ><el-input v-model="dialogForUp.hct"></el-input></el-form-item>
                <el-form-item label="甘油三脂" prop="triglyceride" ><el-input v-model="dialogForUp.triglyceride"></el-input></el-form-item>
                <el-form-item label="LP" prop="lp" ><el-input v-model="dialogForUp.lp"></el-input></el-form-item>
                <el-form-item label="SOD" prop="sod" ><el-input v-model="dialogForUp.sod"></el-input></el-form-item>
                <el-form-item label="MDA" prop="mda" ><el-input v-model="dialogForUp.mda"></el-input></el-form-item>
                <el-form-item label="低密脂蛋白" prop="ldl" ><el-input v-model="dialogForUp.ldl"></el-input></el-form-item>
                <el-form-item label="胆固醇" prop="cholesterol" ><el-input v-model="dialogForUp.cholesterol"></el-input></el-form-item>
                <el-form-item label="检测日期" prop="checkDate" ><el-date-picker type="date" v-model="dialogForUp.checkDate" placeholder="选择日期"></el-date-picker></el-form-item>
                <el-form-item label="上传人"><el-input v-model="dialogForUp.uploadUserName" disabled></el-input></el-form-item>
                </span>
                <span v-if="dialogForUp.type==='ct'">
                <el-form-item label="检测日期" prop="checkDate" ><el-date-picker type="date" v-model="dialogForUp.checkDate" placeholder="选择日期"></el-date-picker></el-form-item>
                <el-form-item label="上传人"><el-input v-model="dialogForUp.uploadUserName" disabled></el-input></el-form-item>
                </span>
                <span v-if="dialogForUp.type==='mt'">
                <el-form-item label="检测日期" prop="checkDate" ><el-date-picker type="date" v-model="dialogForUp.checkDate" placeholder="选择日期"></el-date-picker></el-form-item>
                <el-form-item label="上传人"><el-input v-model="dialogForUp.uploadUserName" disabled></el-input></el-form-item>
                </span>
                <span v-if="dialogForUp.type==='ots'">
                <el-form-item label="检测日期" prop="checkDate" ><el-date-picker type="date" v-model="dialogForUp.checkDate" placeholder="选择日期"></el-date-picker></el-form-item>
                <el-form-item label="上传人"><el-input v-model="dialogForUp.uploadUserName" disabled></el-input></el-form-item>
                </span>
                <el-form-item label="附件上传" prop="photo" style="display:block;">
                    <template slot="label">病例</template>
                    <div :span="19" class="avatar">
                    <el-upload
                            class="upload-demo"
                            ref="uploadImageBox"
                            :action="dialogForUp.actionUrl"
                            :on-success="updateImageSize"
                            list-type="picture">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                        <div v-for="item in fileList" style="width:1060px;height:1520px;">
                            <img :src="item.url" style="width:1060px;height:1520px;">
                        </div>
                    </div>
                </el-form-item>
                </el-form>       
            </div>
            <div slot="footer" style="text-align: right;">
                <el-button type="primary" @click="submitChestDialog">提交</el-button>
            </div> 
        </el-dialog>       
    </div>
</template>
<script>
import bodyCheckApi from 'plugins/myaxios/bodycheck/bodyCheck.js';
export default {
    name:'historicalcase',
    props:['data','width','height','idCard','cVal'],
    data(){
        return{
            fileList:[],
            chestRules:{},
            tableChestData :[],/**病例列表 */
            tableDataForBlood:[],
            tableDataForCt:[],
            tableDataForMt:[],
            tableDataForOts:[],
            dialogForUp:{
                title:'',
                isShow:false,
                type:'',
                actionUrl:'/uploadCheckImage/{id}/{type}',
                id:null,                           //记录id
                //血液检查
                bloodId:null,                      //记录Id
                wbc: null,                         //白细胞计数
                platelet:null,                     //血小板
                hct:null,                          //HCT
                filePath:null,                     //图片路径（数据库字段）
                images:[],                         //图片路径（视图层路径）
                checkDate: new Date(),             //检查日期 
                uploadDate: new Date(),            //上传日期 
                uploadUser: null,                  //上传人ID 
                uploadUserName:localStorage.getItem('ms_username'), //上传人姓名 
                providerIdCard: "513902199201146037", //对应的用户身份证
                triglyceride: null,                //甘油三脂 
                lp: null,                          //LP
                sod: 1,                            //SOD
                mda: null,                         //MDA 
                ldl: null,                         //低密脂蛋白 
                cholesterol: null,                 //胆固醇 
                //血液循环字段完毕
                //历史病例
                historyId:null,                    //记录Id
                checkRemark:null,                  //检测结果
                checkUnit:null,                    //检测单位
                ctId:null,
                mtId:null,
                otsId:null,
            },
            
        }
    },
    created(){
        this.$nextTick(()=>{
            let self = this;
            self.init();
        });        
    },
    watch:{
        idCard(newData,oldData){
            let self = this;
            console.log(newData);
            self.idCard = newData;
        },
        cVal(newData,oldData){
            let self = this;
            self.queryOtherChecks(5);
        }
    },
    computed:{
        divAutoHeight(){
            return this.$store.state.clientHeight;
        },
        divAutoWidth(){
            return this.$store.state.clientWidth;
        },
        tableHeight() {
            return this.$store.state.clientHeight - 184;
        },
    },    
    methods:{
        //初始化
        init(){
           let self = this;
           self.queryOtherChecks(5); 
        },
        //新增生成一条数据
        insertHOtherCheck(type){
            let self = this;
            bodyCheckApi.insertHOtherCheck(5,self.idCard).then(res=>{
                self.queryOtherChecks(Number(5));
            });
        },
        //打开上传dialog弹窗
        insertUpdateCheck(type,row){
            let self = this;
            self.dialogForUp.isShow = true;
            self.copyRowDataToFormData(type,row);
            switch (type) {
                case 'blood': self.dialogForUp.isShow = true;self.dialogForUp.type=type;self.dialogForUp.actionUrl=bodyCheckApi.idTypeImgUpload(row.id,1);self.queryOtherChecksDetail(row.id,1); break;  //血源循环检测
                case 'ct': self.dialogForUp.isShow = true;self.dialogForUp.type=type;self.dialogForUp.actionUrl=bodyCheckApi.idTypeImgUpload(row.id,2);self.queryOtherChecksDetail(row.id,2); break;     //CT检测
                case 'mt': self.dialogForUp.isShow = true;self.dialogForUp.type=type;self.dialogForUp.actionUrl=bodyCheckApi.idTypeImgUpload(row.id,3);self.queryOtherChecksDetail(row.id,3); break;     //MT
                case 'ots': self.dialogForUp.isShow = true;self.dialogForUp.type=type;self.dialogForUp.actionUrl=bodyCheckApi.idTypeImgUpload(row.id,4);self.queryOtherChecksDetail(row.id,4); break;    //其它     
                case 'history': self.dialogForUp.isShow = true;self.dialogForUp.type=type;self.dialogForUp.actionUrl=bodyCheckApi.idTypeImgUpload(row.id,5);self.queryOtherChecksDetail(row.id,5); break;    //历史病例    
                default: break;
            }
        },
        updateImageSize(response, file, fileList){
            let self = this;
            console.log(file)
            let imageObj={name:file.name,url:'data:image/png;base64,'+response.content};
            self.fileList.push(imageObj);
        },
        //数据回显
        copyRowDataToFormData(type,row){
            let self = this;
                self.dialogForUp.id = row.id;
                self.dialogForUp.checkDate = row.checkDate;
                self.dialogForUp.uploadDate = row.uploadDate;
                self.dialogForUp.uploadUser = row.uploadUser;
                self.dialogForUp.uploadUserName = row.uploadUserName;
                self.dialogForUp.providerIdCard = row.providerIdCard;
            switch (type) {
                case 'blood':
                self.dialogForUp.bloodId = row.id;
                self.dialogForUp.wbc = row.wbc;
                self.dialogForUp.platelet = row.platelet;
                self.dialogForUp.hct = row.hct;
                self.dialogForUp.lp = row.lp;
                self.dialogForUp.sod = row.sod;
                self.dialogForUp.mda = row.mda;
                self.dialogForUp.ldl = row.ldl;
                self.dialogForUp.cholesterol = row.cholesterol;
                break;
                case 'ct':
                self.dialogForUp.ctId = row.id;
                
                break;
                case 'mt': 
                self.dialogForUp.mtId = row.id;
            
                break;
                case 'ots':
                self.dialogForUp.otsId = row.id;
                break;
                case 'history':
                self.dialogForUp.historyId = row.id;
                self.dialogForUp.checkUnit = row.checkUnit;
                self.dialogForUp.checkRemark = row.checkRemark;
                break;
            
                default:
                break;
            }
        },
        queryOtherChecks(type){
            let self = this;
            if(self.idCard == undefined || self.idCard == null){
                self.$message("客户身份信息判定失误，请退出重新操作！！");
                return;
            }
            bodyCheckApi.queryOtherChecks(type,self.idCard).then(res=>{
                switch (type) {
                case 1: self.tableDataForBlood =res.content;break;
                case 2:self.tableDataForCt =res.content; break;
                case 3:self.tableDataForMt =res.content; break;
                case 4:self.tableDataForOts =res.content; break;
                case 5:self.tableChestData =res.content; break;
                default:
                    break;
                }
            });
        },
        //获取病例数据
        queryOtherChecksDetail(id,type){
            let self = this;
            self.fileList=[];
            bodyCheckApi.queryOtherChecksDetail(type,id).then(res=>{
                self.$refs.uploadImageBox.clearFiles();
                let images = res.content[0].images;       
                images.forEach(element => {
                    self.fileList.push({name:Math.random(1000),url:element});
                });
            });
        },
        submitChestDialog(){
            let self = this;
            
            switch (self.dialogForUp.type) {
                case 'blood':self.submitBlood();   break;
                case 'ct':self.submitCt();   break;
                case 'mt':self.submitMt();   break;
                case 'ots':self.submitOts();   break;
                case 'history':self.submitHistory();   break;
                default:
                break;
            }
        },
        submitBlood(){
            let self = this;
            bodyCheckApi.insertAndUpdateBlood(self.dialogForUp).then(res=>{
                self.dialogForUp.isShow = false;
                self.$message("保存成功!");
                self.queryOtherChecks(1);

            });
        },
        submitCt(){
            let self = this;
            bodyCheckApi.insertAndUpdateCt(self.dialogForUp).then(res=>{
                self.dialogForUp.isShow = false;
                self.$message("保存成功!");
                self.queryOtherChecks(2);
            })
        },
        submitMt(){
            let self = this;
            bodyCheckApi.insertAndUpdateMt(self.dialogForUp).then(res=>{
                self.dialogForUp.isShow = false;
                self.$message("保存成功!");
                self.queryOtherChecks(3);
            })
        },
        submitOts(){
            let self = this;
            bodyCheckApi.insertAndUpdateOts(self.dialogForUp).then(res=>{
                self.dialogForUp.isShow = false;
                self.$message("保存成功!");
                self.queryOtherChecks(4);
            })
        },
        submitHistory(){
            let self = this;
            bodyCheckApi.insertAndUpdateHistory(self.dialogForUp).then(res=>{
                self.dialogForUp.isShow = false;
                self.$message("保存成功!");
                self.queryOtherChecks(5);
            })
        },
    }
}
</script>